import React, { Component, Fragment } from 'react';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import { Icon, Card, Tooltip, Button } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { channel, financeMode, repayMode, financeType, status, serviceRole } from '../../../common/options';


const { Description } = DescriptionList;

const getWindowWidth = () => window.innerWidth || document.documentElement.clientWidth;


@connect(({ equityModels, loading }) => ({
  equityModels,
  loading: loading.models.equityModels,
}))
class conmpanyInfo extends Component {
  state = {
    stepDirection: 'horizontal',
  };

  componentDidMount() {
    const { dispatch } = this.props;
    const { applyNo } = this.props.location.query;
    dispatch({
      type: 'equityModels/getApplyDesc',
      payload: { code: applyNo },
    });
    this.setStepDirection();
    window.addEventListener('resize', this.setStepDirection, { passive: true });
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.setStepDirection);
    this.setStepDirection.cancel();
  }


  @Bind()
  @Debounce(200)
  setStepDirection() {
    const { stepDirection } = this.state;
    const w = getWindowWidth();
    if (stepDirection !== 'vertical' && w <= 576) {
      this.setState({
        stepDirection: 'vertical',
      });
    } else if (stepDirection !== 'horizontal' && w > 576) {
      this.setState({
        stepDirection: 'horizontal',
      });
    }
  }

  render() {
    const { equityModels: { applyDesc } } = this.props;
    const goBack = () => {
      this.props.history.goBack();
    };
    let view = applyDesc ? (<PageHeaderWrapper
      title={`企业名称:${applyDesc.enterpriseName}`}>

      <Card style={{ marginBottom: 24 }} bordered={false}>
        <DescriptionList title="融资申请信息" style={{ marginBottom: 24 }}>
          <Description term="企业简称">{applyDesc.shortName}</Description>
          <Description term="融资申请编号">{applyDesc.applyNo}</Description>
          <Description term="企业编号">{applyDesc.enterpriseNo}</Description>
          <Description term="资金渠道">{channel.map(item => (
            item.key === applyDesc.channel ? item.value : ''
          ))}</Description>
          <Description term="融资方式">
            {financeMode.map(item => (
              item.key === applyDesc.financeMode ? item.value : ''
            ))}
          </Description>
          <Description term="融资类型">
            {financeType.map(item => (
              item.key === applyDesc.financeType ? item.value : ''
            ))}
          </Description>
          <Description term="融资金额">{applyDesc.amount}元</Description>
          <Description term="还款方式">
            {repayMode.map(item => (
              item.key === applyDesc.repayMode ? item.value : ''
            ))}
          </Description>
          <Description term="融资天数">{applyDesc.totalDays}天</Description>
          <Description term="总服务费">{applyDesc.totalServiceFee}元</Description>
          <Description term="服务费承担方">
            {serviceRole.map(item => (
              item.key === applyDesc.serviceRole ? item.value : ''
            ))}
          </Description>
          <Description term="逾期利息">{applyDesc.overdueRate}</Description>
          <Description term="状态">
            {status.map(item => (
              item.key === applyDesc.status ? item.value : ''
            ))}
          </Description>
          <Description term="驳回原因">{applyDesc.reason}</Description>
          <Description term="申请人">{applyDesc.createName}</Description>
          <Description term="创建时间">{applyDesc.createTime}</Description>
        </DescriptionList>
        <Button type="primary" onClick={() => goBack()}>返回</Button>

      </Card>
    </PageHeaderWrapper>) : '';
    return view;

  }
}

export default conmpanyInfo;
